<template>
    <div
        class="page_root"
        :key="queryUpdateFlag"
        data-page-name="审批管理-定制"
        data-page-identification="f_evcy3s67ww"
    >
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_ymq5ravira 自定义模板_imy6jgazxy -->
            <a-modal
                :visible="reasonVisible"
                title="驳回原因"
                centered
                :footer="null"
                @cancel="reasonVisible = false"
                :z-index="1010"
            >
                {{ reason }}
            </a-modal>
            <!--          批量通过/通过/驳回/撤销-->
            <a-modal
                :visible="approveState.approveModalVisible"
                :title="approveState.approveModalTitle"
                centered
                @ok="handleConfirmApprove"
                @cancel="handleCancelApprove"
                :ok-button-props="{
                    loading: approveState.approveBtnLoading
                }"
                :z-index="1010"
            >
                <!--              :style="{ zIndex: 9999 }"-->
                <div v-if="approveState.approveModalTitle === '批量审批通过'">
                    已选择{{ allDailyId.length }}个审批事项,是否全部审批通过？
                </div>
                <div v-else-if="approveState.approveModalTitle === '审批驳回'">
                    <a-textarea v-model:value="approveState.approveRemark" :row="4" placeholder="请输入驳回原因" />
                </div>
                <div v-else-if="approveState.approveModalTitle === '审批通过'">
                    <a-textarea v-model:value="approveState.approveRemark" :row="4" placeholder="请输入备注" />
                </div>
            </a-modal>
            <!--          通过/驳回/撤销-->
            <a-modal
                title="审批详情"
                :visible="iframShow"
                width="100vw"
                :body-style="{
                    height: '800px',
                    paddingTop: '16px'
                }"
                :z-index="1000"
                style="top: 0"
                @cancel="approveStatusCancel"
                centered
                ok-text="通过"
                cancel-text="驳回"
                :ok-button-props="{ loading: approveBtnLoading }"
            >
                <template #footer>
                    <a-button type="primary" v-if="activeKey === '待办事项'" @click="handlePass(null)">通过</a-button>
                    <a-button type="primary" v-if="activeKey === '待办事项'" @click="handleReject(null)">驳回</a-button>
                    <a-button
                        type="primary"
                        v-if="activeKey === '我发起的' && approveState.currentApprove.processStatus === 'IN_PROCESS'"
                        @click="handleRevoke(null)"
                        >撤销</a-button
                    >
                    <a-button
                        type="primary"
                        v-if="activeKey === '我发起的' && approveState.currentApprove.processStatus === 'IN_PROCESS'"
                        @click="handleReminder(null)"
                        >催办</a-button
                    >
                </template>
                <div class="detail-content">
                    <div class="detail-left">
                        <iframe id="myIframe" :src="showUrl" allowfullscreen height="100%" width="100%"></iframe>
                    </div>
                    <div class="detail-right">
                        <div class="flow-path">流程日志</div>
                        <!--                    <div class="title-new-status">-->
                        <!--                        <div class="left-title">审批类型:{{ statuState.list.processName }}</div>-->
                        <!--                        <div class="right-title">审批提交时间:{{ statuState.list.createdDate }}</div>-->
                        <!--                    </div>-->
                        <a-steps class="status-step" direction="vertical">
                            <a-step
                                v-for="(inside, index) in statuState.list.processTaskList"
                                :status="getIconStatus(inside.assignStatus)"
                            >
                                <template #title>
                                    <div v-if="inside.taskName">
                                        <CheckCircleFilled
                                            style="color: #52c41a"
                                            v-if="inside.assignResult === 'APPROVE'"
                                        />
                                        <CloseCircleFilled
                                            v-if="inside.assignResult === 'REJECT'"
                                            style="color: #ff4d4f"
                                        />
                                        {{
                                            getTextStatus(inside.assignResult) + inside.taskName === '结束节点'
                                                ? inside.taskName
                                                : inside.taskName + ':' + inside.assignUserName
                                        }}
                                    </div>
                                    <div v-else> 系统 </div>
                                </template>
                                <template #description>
                                    <div>
                                        {{ inside.lastModifiedDate }}
                                    </div>
                                    <div>
                                        {{ inside.assignRemark }}
                                    </div>
                                </template>
                            </a-step>
                        </a-steps>
                    </div>
                </div>
            </a-modal>
            <div class="body">
                <a-tabs v-model:activeKey="activeKey" size="large" @change="activeChange">
                    <a-tab-pane key="待办事项">
                        <template #tab>待办事项({{ approveState.countDara.todoCount }})</template>
                    </a-tab-pane>
                    <a-tab-pane key="已办事项">
                        <template #tab>已办事项({{ approveState.countDara.doneCount }})</template>
                    </a-tab-pane>
                    <a-tab-pane key="我发起的">
                        <template #tab>我发起的({{ approveState.countDara.createCount }})</template>
                    </a-tab-pane>
                    <a-tab-pane key="抄送我的">
                        <template #tab>抄送我的({{ approveState.countDara.ccCount }})</template>
                    </a-tab-pane>
                </a-tabs>
                <div class="top-tag-container">
                    <div class="cover" v-if="tagsData.length > 0"></div>
                    <div class="cover1" v-if="tagsData.length > 0"></div>
                    <div class="top-tag" v-if="tagsData.length > 0">
                        <a-checkable-tag
                            v-for="(tag, index) in tagsData"
                            :key="tag.title"
                            :checked="selectedTag === tag"
                            @change="checked => handleChange(tag, checked)"
                            :class="{ sticky: index === 0 }"
                        >
                            {{ tag.processName }}({{ tag.count }})
                        </a-checkable-tag>
                    </div>
                </div>
                <a-spin :spinning="mainLoading" tip="请稍等...">
                    <div class="main">
                        <div class="no-data-img" v-if="approveState.approveData.length == 0">
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink"
                                width="265px"
                                height="192px"
                                viewBox="0 0 265 192"
                                version="1.1"
                            >
                                <title>暂无待办事项</title>
                                <defs>
                                    <linearGradient
                                        x1="50%"
                                        y1="85.1278551%"
                                        x2="50%"
                                        y2="-24.3022005%"
                                        id="linearGradient-1"
                                    >
                                        <stop stop-color="#3875FF" stop-opacity="0" offset="0%" />
                                        <stop stop-color="#3875FF" stop-opacity="0.2" offset="100%" />
                                    </linearGradient>
                                    <linearGradient
                                        x1="50%"
                                        y1="85.1278551%"
                                        x2="50%"
                                        y2="-24.3022005%"
                                        id="linearGradient-2"
                                    >
                                        <stop stop-color="#3875FF" stop-opacity="0" offset="0%" />
                                        <stop stop-color="#3875FF" stop-opacity="0.2" offset="100%" />
                                    </linearGradient>
                                    <linearGradient
                                        x1="50%"
                                        y1="85.1278551%"
                                        x2="50%"
                                        y2="-24.3022005%"
                                        id="linearGradient-3"
                                    >
                                        <stop stop-color="#3875FF" stop-opacity="0" offset="0%" />
                                        <stop stop-color="#3875FF" stop-opacity="0.2" offset="100%" />
                                    </linearGradient>
                                    <linearGradient x1="50%" y1="50%" x2="50%" y2="-4.79965365%" id="linearGradient-4">
                                        <stop stop-color="#3875FF" stop-opacity="0" offset="0%" />
                                        <stop stop-color="#3875FF" stop-opacity="0.1" offset="100%" />
                                    </linearGradient>
                                    <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-5">
                                        <stop stop-color="#9CBEF7" offset="0%" />
                                        <stop stop-color="#96D1F7" offset="100%" />
                                    </linearGradient>
                                    <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-6">
                                        <stop stop-color="#9CBEF7" offset="0%" />
                                        <stop stop-color="#96D1F7" offset="100%" />
                                    </linearGradient>
                                </defs>
                                <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <g id="审批管理-暂无待办事项" transform="translate(-927, -470)">
                                        <g id="暂无待办事项" transform="translate(927, 470)">
                                            <g id="编组-69备份-3备份-3" fill-rule="nonzero">
                                                <path
                                                    d="M30.4,70.4 C38.3897145,70.4 44.9396432,76.4022329 45.5530639,84.0283112 C45.8323774,84.0092712 46.1150286,84 46.4,84 C53.027417,84 58.4,89.0144112 58.4,95.2 C58.4,101.385589 53.027417,106.4 46.4,106.4 C46.1313282,106.4 45.8647188,106.391759 45.6004459,106.375534 L45.6,107.2 L8.8,107.2 L8.80006856,105.99739 C3.72613437,104.690379 0,100.351322 0,95.2 C0,89.0144112 5.372583,84 12,84 C13.1159648,84 14.1963502,84.1421776 15.2214963,84.4081848 C15.6437054,76.6027782 22.2779069,70.4 30.4,70.4 Z"
                                                    id="形状结合备份"
                                                    fill="url(#linearGradient-1)"
                                                />
                                                <path
                                                    d="M174.4,35.2 L174.400166,35.1009906 C168.085987,34.3137074 163.2,28.9274454 163.2,22.4 C163.2,15.3307552 168.930755,9.6 176,9.6 C177.223344,9.6 178.406604,9.77161808 179.527019,10.0920919 C181.87653,4.17968127 187.650157,0 194.4,0 C202.141022,0 208.598072,5.49733733 210.080147,12.8010091 C216.449395,12.8415186 221.6,17.8400063 221.6,24 C221.6,30.0561716 216.621551,34.98966 210.40049,35.1934501 L210.4,35.2 L174.4,35.2 Z"
                                                    id="形状结合"
                                                    fill="url(#linearGradient-2)"
                                                    transform="translate(192.4, 17.6) scale(-1, 1) translate(-192.4, -17.6)"
                                                />
                                                <path
                                                    d="M242.8,47.2 C247.491543,47.2 251.362882,50.7117164 251.928816,55.249951 C252.214523,55.2167339 252.505192,55.2 252.8,55.2 C256.77645,55.2 260,58.2444637 260,62 C260,65.7555363 256.77645,68.8 252.8,68.8 C252.529676,68.8 252.262831,68.7859302 252.000242,68.7585236 L252,69.6 L229.6,69.6 L229.600068,68.6315132 C226.393652,67.9443906 224,65.2361993 224,62 C224,58.2444637 227.22355,55.2 231.2,55.2 C232.054514,55.2 232.874259,55.3405911 233.634718,55.5986176 C234.040539,50.892793 237.989021,47.2 242.8,47.2 Z"
                                                    id="形状结合备份-2"
                                                    fill="url(#linearGradient-3)"
                                                />
                                                <g id="编组-50" transform="translate(1.6, 76.8)">
                                                    <ellipse
                                                        id="椭圆形"
                                                        fill="url(#linearGradient-4)"
                                                        cx="131.6"
                                                        cy="57.6"
                                                        rx="131.6"
                                                        ry="57.6"
                                                    />
                                                    <g id="编组-46" transform="translate(30.4, 4.8)">
                                                        <rect
                                                            id="矩形"
                                                            fill="#D7E3FF"
                                                            x="6.4"
                                                            y="20"
                                                            width="2.4"
                                                            height="12"
                                                        />
                                                        <path
                                                            d="M8.4,21.5460356 C25.469423,21.5460356 11.8000002,-1.42108547e-14 8.4,-1.42108547e-14 C4.99999998,-1.42108547e-14 -8.66942296,21.5460356 8.4,21.5460356 Z"
                                                            id="椭圆形"
                                                            fill="#EAF0FF"
                                                        />
                                                    </g>
                                                    <g id="编组-46备份-2" transform="translate(218.4, 4.8)">
                                                        <rect
                                                            id="矩形"
                                                            fill="#D7E3FF"
                                                            x="4.97664"
                                                            y="13.824"
                                                            width="1.65888"
                                                            height="8.2944"
                                                        />
                                                        <path
                                                            d="M5.80608,14.8926198 C17.6044651,14.8926198 8.15616008,-9.8225428e-15 5.80608,-9.8225428e-15 C3.45599989,-9.8225428e-15 -5.99230512,14.8926198 5.80608,14.8926198 Z"
                                                            id="椭圆形"
                                                            fill="#EAF0FF"
                                                        />
                                                    </g>
                                                    <g id="编组-46备份" transform="translate(245.6, 21.6)">
                                                        <rect
                                                            id="矩形"
                                                            fill="#D7E3FF"
                                                            x="3.6"
                                                            y="10"
                                                            width="1.2"
                                                            height="6"
                                                        />
                                                        <path
                                                            d="M4.2,10.7730178 C12.7347114,10.7730178 5.90000008,-7.10542736e-15 4.2,-7.10542736e-15 C2.5,-7.10542736e-15 -4.33471146,10.7730178 4.2,10.7730178 Z"
                                                            id="椭圆形"
                                                            fill="#EAF0FF"
                                                        />
                                                    </g>
                                                </g>
                                            </g>
                                            <g id="编组-61" transform="translate(89.6, 21.6)">
                                                <ellipse
                                                    id="椭圆形"
                                                    fill="#E2EBFF"
                                                    fill-rule="nonzero"
                                                    cx="42.8"
                                                    cy="80"
                                                    rx="42.8"
                                                    ry="4.8"
                                                />
                                                <rect
                                                    id="矩形备份-91"
                                                    fill="url(#linearGradient-5)"
                                                    x="5.6"
                                                    y="0"
                                                    width="70.4"
                                                    height="80.8"
                                                    rx="3.2"
                                                />
                                                <g
                                                    id="编组-60"
                                                    transform="translate(20.8, 28)"
                                                    fill="#FFFFFF"
                                                    fill-rule="nonzero"
                                                >
                                                    <rect id="矩形" x="0" y="0" width="40" height="3.2" rx="1.6" />
                                                    <rect
                                                        id="矩形备份-92"
                                                        x="0"
                                                        y="15.2"
                                                        width="40"
                                                        height="3.2"
                                                        rx="1.6"
                                                    />
                                                    <rect
                                                        id="矩形备份-93"
                                                        x="0"
                                                        y="30.4"
                                                        width="40"
                                                        height="3.2"
                                                        rx="1.6"
                                                    />
                                                </g>
                                                <path
                                                    d="M21.6,0 L60.7346814,0 L55.7992343,8.40508424 C55.6555754,8.64973584 55.393086,8.8 55.1093744,8.8 L27.225307,8.8 C26.9415954,8.8 26.6791059,8.64973584 26.535447,8.40508424 L21.6,0 L21.6,0 Z"
                                                    id="矩形"
                                                    fill="#FFFFFF"
                                                    fill-rule="nonzero"
                                                />
                                                <rect
                                                    id="矩形备份-94"
                                                    fill="url(#linearGradient-6)"
                                                    x="29.6"
                                                    y="0"
                                                    width="23.2"
                                                    height="3.2"
                                                    rx="1.6"
                                                />
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </svg>
                            <div class="no-data-msg">暂无{{ activeKey }}</div>
                        </div>
                        <!-- 显示项目类型标题 -->

                        <div
                            class="type-title"
                            v-if="
                                (selectedTag?.thirdProcessCode === 'work_flow_code_daily_00000001' ||
                                    selectedTag?.thirdProcessCode === 'work_flow_code_daily_00000002') &&
                                activeKey === '待办事项'
                            "
                        >
                            <a-checkbox
                                style="margin-top: 10px"
                                v-model:checked="checked"
                                @change="handleCheckAllDaily(group)"
                                >全选</a-checkbox
                            >
                            <div class="sub-daily" @click="batchApproval">批量通过</div>
                        </div>
                        <div v-for="item in approveState.approveData" :key="item.processInstanceId" class="item">
                            <div class="item-top">
                                <div class="sub-time">
                                    <span class="default-font">审批类型：</span>
                                    <span class="weight-font">{{ item.processName }}</span>
                                </div>
                                <div class="sub-time">
                                    <span class="default-font">申请时间：</span>
                                    <span class="weight-font">{{ item.createdDate }}</span>
                                </div>
                                <div class="sub-people">
                                    <span class="default-font">申请人：</span>
                                    <span class="weight-font">{{ item.createdByName }}</span>
                                </div>
                                <div
                                    class="approve-status"
                                    v-if="
                                        activeKey === '我发起的' || activeKey === '已办事项' || activeKey === '抄送我的'
                                    "
                                >
                                    <div v-if="item.processStatus === 'IN_PROCESS'" class="in-progress">审批中</div>
                                    <div v-if="item.processStatus === 'APPROVED'" class="approved">已通过</div>
                                    <div v-if="item.processStatus === 'REJECT'" class="reject">被驳回</div>
                                    <div v-if="item.processStatus === 'REVOKE'" class="revoke">已撤销</div>
                                    <div v-if="item.processStatus === 'END'" class="reject">已结束</div>
                                </div>
                                <div class="urging" v-if="item.urge">催办</div>
                            </div>
                            <div class="item-inner">
                                <a-checkbox
                                    v-if="
                                        (selectedTag?.thirdProcessCode === 'work_flow_code_daily_00000001' ||
                                            selectedTag?.thirdProcessCode === 'work_flow_code_daily_00000002') &&
                                        activeKey === '待办事项'
                                    "
                                    style="margin-top: 10px; margin-right: 16px"
                                    @change="itemCheck(item)"
                                    v-model:checked="item.selected"
                                />

                                <div v-for="field in item.fields" :key="field.title" class="item-content">
                                    <span class="item-title">{{ field.title }}</span>
                                    <a-tooltip>
                                        <template #title>{{ field.value }}</template>
                                        <span :class="field.class" class="item-main" :id="field.id">{{
                                            field.value
                                        }}</span>
                                    </a-tooltip>
                                </div>
                                <div class="detail-batch">
                                    <a-space v-if="activeKey === '待办事项'">
                                        <div class="detail-btn" @click="handleGetDetail(item)">详情</div>
                                        <div class="pass-btn" @click="() => handlePass(item)">通过</div>
                                        <div class="reject-btn" @click="handleReject(item)">驳回</div>
                                    </a-space>
                                    <a-space v-if="activeKey === '我发起的'">
                                        <div class="detail-btn" @click="handleGetDetail(item)">详情</div>
                                        <div
                                            class="reject-btn"
                                            v-if="item.processStatus === 'REJECT'"
                                            @click="handleGetReason(item)"
                                            >驳回原因</div
                                        >
                                        <div
                                            class="urg-btn"
                                            v-if="item.processStatus === 'IN_PROCESS'"
                                            @click="handleReminder(item)"
                                            >催办</div
                                        >
                                        <div
                                            class="reject-btn"
                                            v-if="item.processStatus === 'IN_PROCESS'"
                                            @click="handleRevoke(item)"
                                            >撤销</div
                                        >
                                    </a-space>
                                    <a-space v-if="activeKey === '已办事项'">
                                        <div class="detail-btn" @click="handleGetDetail(item)">详情</div>
                                        <div
                                            class="reject-btn"
                                            v-if="item.processStatus === 'REJECT'"
                                            @click="handleGetReason(item)"
                                            >驳回原因</div
                                        >
                                    </a-space>
                                    <a-space v-if="activeKey === '抄送我的'">
                                        <div class="detail-btn" @click="handleGetDetail(item)">详情</div>
                                        <div
                                            class="reject-btn"
                                            v-if="item.processStatus === 'REJECT'"
                                            @click="handleGetReason(item)"
                                            >驳回原因</div
                                        >
                                    </a-space>
                                </div>
                            </div>
                            <!-- 操作部分 -->
                        </div>
                    </div>
                </a-spin>
            </div>

            <!-- end vid_ymq5ravira 自定义模板_imy6jgazxy -->
            <div class="pagination-div">
                <a-pagination
                    v-model:current="pagination.current"
                    :total="pagination.total"
                    :show-total="pagination.showTotal"
                    show-quick-jumper
                    :show-size-changer="true"
                    :page-size-options="pagination.pageSizeOptions"
                    @show-size-change="pageSizeChange"
                    @change="pageChange"
                />
            </div>
            <!-- end vid_ymq5ravira 自定义模板_imy6jgazxy -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    // 审批管理数据
    const pageSizeChange = (current, size) => {
        pagination.value.current = current
        pagination.value.pageSize = size
        getApproveData()
    }
    const pageChange = (page, pageSize) => {
        pagination.value.current = page
        pagination.value.pageSize = pageSize
        getApproveData()
    }
    const pagination = ref({
        current: 1,
        pageSize: 20,
        showSizeChanger: true,
        total: 0,
        pageSizeOptions: ['20', '40', '60', '80', '100'],
        showTotal: total => `共 ${total} 个项目 第${pagination.value.current}/${Math.ceil(pagination.value.total/pagination.value.pageSize)}页`,
    })

    const activeKey = ref('待办事项')
    const innerActiveKey = ref('')
    const tagsData = ref([])
    const selectedTag = ref({})
    const checkName = ref('')
    const handleChange = (tag, checked) => {
        if (checked) {
            checkName.value = tag.processName
            selectedTag.value = tag
            getApproveData()
        } else {
            selectedTag.value = {}
        }
    }
    onMounted(async () => {
        getCount()
        getTagData()
    })
    const mainLoading = ref(false)
    const approveState = reactive({
        countDara: {},
        approveData: [],
        currentApprove: {},
        approveModalTitle: '',
        approveModalVisible: false,
        approveRemark: '',
        approveBtnLoading: false
    })

    const checked = ref(false)
    const allDailyId = ref([])
    function handleCheckAllDaily() {
        allDailyId.value = []
        if (checked.value) {
            approveState.approveData.forEach(item => {
                item.selected = true
            })
            allDailyId.value = approveState.approveData.map(item => {
                return {
                    processInstanceId: item.processInstanceId,
                    taskId: item.taskId
                }
            })
        } else {
            approveState.approveData.forEach(item => {
                item.selected = false
            })
            allDailyId.value = []
        }
    }
    // 单选
    function itemCheck(item) {
        if (item.selected) {
            allDailyId.value.push({
                processInstanceId: item.processInstanceId,
                taskId: item.taskId
            })
        } else {
            const index = allDailyId.value.findIndex(
                i => i.processInstanceId === item.processInstanceId && i.taskId === item.taskId
            )
            if (index !== -1) {
                allDailyId.value.splice(index, 1)
            }
        }
    }

    watch(
        () => allDailyId.value,
        () => {
            if (allDailyId.value.length == approveState.approveData.length) {
                checked.value = true
            } else {
                checked.value = false
            }
        },
        { deep: true }
    )
    //     详情
    function handleGetDetail(item) {
        approveState.currentApprove = item
        let currentUrl = window.location.origin
        // currentUrl = 'http://asa-qa.allintechinc.com'
        let endUrl = formatUrl(item.currentNode.pageConfig.urlPc)
        showUrl.value = `${currentUrl}/${endUrl}?processInstanceId=${item.processInstanceId}`
        // showUrl.value = `http://asa-qa.allintechinc.com/app_50000005/process/70352ff9-3780-11ef-83e9-52a5438c6e27/startNode1/MyInitiated`;
        iframShow.value = true
        getApproveStatus(item.processInstanceId, item.taskId)
    }
    const reasonVisible = ref(false)
    const reason = ref('')
    // 驳回原因
    function handleGetReason(item) {
        get(`/workflow-platform/api/v1/process_instance/detail/${item.processInstanceId}/${item.taskId} `).then(
            data => {
                let reasonItem = data.data.processTaskList.find(item => item.assignResult === 'REJECT')
                reason.value = reasonItem.assignRemark
                reasonVisible.value = true
            }
        )
    }
    const getIconStatus = status => {
        if (status === 'HANDLED' || status === 'SIPED') {
            return 'finish'
        } else if (status === 'WAIT_HANDLE') {
            return 'wait'
        } else {
            return 'finish'
        }
    }
    const getTextStatus = text => {
        if (text == 'CC') {
            return '(抄送)'
        } else {
            return ''
        }
    }
    const getResult = item => {
        console.log(item)
        if (item.taskName === '结束节点') {
            return '结束节点'
        } else {
            return item.taskName + item.assignUserName
        }
    }

    // 查流程日志
    const statuState = reactive({
        visible: true,
        list: []
    })
    function getApproveStatus(id, type) {
        get(`/workflow-platform/api/v1/process_instance/detail/${id}/${type} `).then(data => {
            statuState.list = data.data
        })
    }
    function formatUrl(url) {
        // 检查是否已经是完整的URL
        if (url.startsWith('app_')) {
            return url
        } else {
            // 如果不是，则补全前缀
            return `app_50000005/page/${url}`
        }
    }
    function iframCancel() {
        approveState.approveModalTitle = '审批驳回'
        approveState.approveModalVisible = true
    }
    const keyMapping = {
        '待办事项': 'todo',
        '已办事项': 'done',
        '我发起的': 'myCreate',
        '抄送我的': 'cc'
    }

    const mappedActiveKey = computed(() => keyMapping[activeKey.value])

    // 驳回
    function handleReject(item) {
        if (item) {
            approveState.currentApprove = item
        }
        approveState.approveModalTitle = '审批驳回'
        approveState.approveModalVisible = true
    }
    // 通过
    function handlePass(item) {
        if (item) {
            approveState.currentApprove = item
        }
        approveState.approveModalTitle = '审批通过'
        approveState.approveModalVisible = true
    }
    //     催办
    function handleReminder(item) {
        if (item) {
            approveState.currentApprove = item
            if (approveState.currentApprove.urge) {
                message.info('该审批已经催办了！')
                return
            }
        }

        mainLoading.value = true
        put(`/workflow-platform/api/v1/process_instance/urge/${approveState.currentApprove.processInstanceId}`)
            .then(data => {
                message.success('已为您催办')
                iframShow.value = false
            })
            .catch(e => {
                message.error(e.errorMsg)
            })
            .finally(() => {
                mainLoading.value = false
            })
    }
    //     撤销
    function handleRevoke(item) {
        if (item) {
            approveState.currentApprove = item
        }
        mainLoading.value = true
        put(`/workflow-platform/api/v1/process_instance/revoke/${approveState.currentApprove.processInstanceId}`, {
            revokeReason: '撤销'
        })
            .then(data => {
                iframShow.value = false
                message.success('已为您撤销')
                getTagData()
                getCount()
            })
            .catch(e => {
                message.error(e.errorMsg)
            })
            .finally(() => {
                mainLoading.value = false
            })
    }
    // 批量通过
    function batchApproval() {
        if (allDailyId.value.length == 0) {
            message.info('请全选或多选工时日报审批')
            return
        }
        approveState.approveModalTitle = '批量审批通过'
        approveState.approveModalVisible = true
    }
    // 确认审批
    function handleConfirmApprove() {
        if (approveState.approveModalTitle === '审批驳回') {
            approveState.approveBtnLoading = true
            put('/workflow-platform/api/v1/process_instance/task/approve', {
                approveAction: 'REJECT',
                approveRemark: approveState.approveRemark,
                processInstanceId: approveState.currentApprove.processInstanceId,
                taskId: approveState.currentApprove.taskId
            })
                .then(data => {
                    if (data.errorMsg) {
                        message.error(data.errorMsg)
                    } else {
                        message.success('已驳回审批')
                        approveState.approveModalVisible = false
                        iframShow.value = false
                        showUrl.value = ''
                        getTagData()
                        getCount()
                    }
                })
                .catch(e => {
                    message.error(e.errorMsg)
                })
                .finally(() => {
                    approveState.approveBtnLoading = false
                })
        } else if (approveState.approveModalTitle === '批量审批通过') {
            approveState.approveBtnLoading = true
            const params = {
                taskList: allDailyId.value,
                approveRemark: '批量审批',
                approveAction: 'APPROVE'
            }
            put('/workflow-platform/api/v1/process_instance/task/approve/batch', params)
                .then(data => {
                    if (data.errorMsg) {
                        message.error(data.errorMsg)
                    } else {
                        message.success('已通过批量审批')
                        approveState.approveModalVisible = false
                        getTagData()
                        getCount()
                        allDailyId.value = []
                        checked.value = false
                    }
                })
                .catch(e => {
                    message.error(e.errorMsg)
                })
                .finally(() => {
                    approveState.approveBtnLoading = false
                })
        } else if (approveState.approveModalTitle === '审批通过') {
            approveState.approveBtnLoading = true
            put('/workflow-platform/api/v1/process_instance/task/approve', {
                approveAction: 'APPROVE',
                approveRemark: approveState.approveRemark,
                processInstanceId: approveState.currentApprove.processInstanceId,
                taskId: approveState.currentApprove.taskId
            })
                .then(data => {
                    if (data.errorMsg) {
                        message.error(data.errorMsg)
                    } else {
                        message.success('已通过审批')
                        approveState.approveModalVisible = false
                        iframShow.value = false
                        showUrl.value = ''
                        getTagData()
                        getCount()
                    }
                })
                .catch(e => {
                    message.error(e.errorMsg)
                })
                .finally(() => {
                    mainLoading.value = false
                    approveState.approveBtnLoading = false
                })
        }
    }
    // 取消审批
    function handleCancelApprove() {
        approveState.approveModalVisible = false
        approveState.approveRemark = ''
    }
    const iframShow = ref(false)
    const showUrl = ref('')
    // 获取顶部tag
    function getTagData() {
        selectedTag.value = null
        tagsData.value = []
        get(`/solution-ppm/api/v2/built-in-system-ppm/approve/classify/${mappedActiveKey.value}/ALL`).then(data => {
            if (data.code === 200) {
                tagsData.value = data.data
                if (checkName.value) {
                    const checkIndex = tagsData.value.find(item => item.processName === checkName.value)
                    if (checkIndex) {
                        selectedTag.value = checkIndex
                        getApproveData()
                    } else {
                        selectedTag.value = tagsData.value[0]
                        getApproveData()
                    }
                } else {
                    selectedTag.value = tagsData.value[0]
                    getApproveData()
                }
            }
        })
    }
    function approveStatusCancel() {
        iframShow.value = false
        approveState.approveRemark = ''
        approveState.currentApprove = {}
    }
    // 获取数量
    function getCount() {
        get('/workflow-platform/api/v1/process_instance/task/counter').then(data => {
            approveState.countDara = data.data
        })
    }
    const defaultMap = [
        { title: '项目名称', field: 'projectName' },
        { title: '项目代号', field: 'projectCode' }
    ]
    const map1 = [
        { title: '项目名称', field: 'projectName' },
        { title: '项目代号', field: 'projectCode' },
        { title: '项目负责人', field: 'plName' },
        { title: '产品经理', field: 'productLeaderName' },
        { title: '项目经理', field: 'pmName' }
    ]
    const map2 = [
        { title: '项目名称', field: 'projectName' },
        { title: '项目代号', field: 'projectCode' },
        { title: '项目阶段名称', field: 'milepostName' },
        { title: '任务名称', field: 'taskName' },
        { title: '任务负责人', field: 'taskOwner' },
        { title: '审核员', field: 'assessorName' }
    ]
    const map3 = [
        { title: '项目名称', field: 'projectName' },
        { title: '项目代号', field: 'projectCode' },
        { title: '项目总监', field: 'projectDirector' },
        { title: 'PMO', field: 'projectManagementOffice' },
        { title: '项目经理', field: 'pmName' }
    ]
    const map4 = [
        { title: '项目名称', field: 'projectName' },
        { title: '项目代号', field: 'projectCode' },
        { title: '项目阶段名称', field: 'milepostName' },
        { title: '项目经理', field: 'pmName' }
    ]
    const map5 = [
        { title: '项目名称', field: 'projectName' },
        { title: '项目代号', field: 'projectCode' },
        { title: '项目阶段名称', field: 'milepostName' },
        { title: '任务名称', field: 'taskName' },
        { title: '项目经理', field: 'pmName' }
    ]
    const map6 = [
        { title: '项目名称', field: 'projectName' },
        { title: '项目总监', field: 'projectDirector' },
        { title: 'PMO', field: 'projectManagementOffice' },
        { title: '项目经理', field: 'pmName' }
    ]
    const map7 = [{ title: '模板名称', field: 'templateName' }]
    const map8 = [
        { title: '行动项任务名称', field: 'actionTaskName' },
        { title: '任务负责人', field: 'taskOwner' },
        { title: '审核员', field: 'assessorName' },
        { title: 'PMO', field: 'projectManagementOffice' }
    ]
    const map9 = [{ title: '项目名称', field: 'projectName' }]
    const map10 = [
        { title: '项目名称', field: 'projectName' },
        { title: '项目类型', field: 'projectType' },
        { title: '团队负责人', field: 'teamLeader' },
        { title: '负责人', field: 'leader' }
    ]
    const map11 = [
        { title: '项目名称', field: 'projectName' },
        { title: '项目阶段名称', field: 'milepostName' },
        { title: '项目经理', field: 'pmName' }
    ]
    const map12 = [
        { title: '项目名称', field: 'projectName' },
        { title: '项目阶段名称', field: 'milepostName' },
        { title: '任务名称', field: 'taskName' },
        { title: '项目经理', field: 'pmName' }
    ]
    const map13 = [
        { title: '项目名称', field: 'projectName' },
        { title: '项目阶段名称', field: 'milepostName' },
        { title: '任务名称', field: 'taskName' },
        { title: '风险解决人', field: 'solver' }
    ]
    const map14 = [
        { title: '项目名称', field: 'projectName' },
        { title: '项目代号', field: 'projectCode' },
        { title: '项目负责人', field: 'plName' },
        { title: '产品经理', field: 'productLeaderName' },
        { title: '项目经理', field: 'pmName' }
    ]
    const map15 = [
        { title: '工时对应时间', field: 'dailyDate' },
        { title: '项目名称', field: 'projectName' },
        { title: '项目阶段名称', field: 'milepostName' },
        { title: '任务名称', field: 'taskName' },
        { title: '工时', field: 'workingHours' },
        { title: '风险描述', field: 'riskDescription' },
        { title: '解决方案', field: 'solution' }
    ]
    const map16 = [
        { title: '工时对应时间', field: 'dailyDate' },
        { title: '工作类型', field: 'workType' },
        { title: '工时', field: 'workingHours' }
    ]
    const map17 = [
        { title: '项目名称', field: 'projectName' },
        { title: '项目总监', field: 'projectDirector' },
        { title: '项目经理', field: 'pmName' },
        { title: 'PMO', field: 'projectManagementOffice' }
    ]
    // 新工单
    const map18 = [
        { title: '工单标题', field: 'content' },
        { title: '工单类型', field: 'type' },
        { title: '优先级', field: 'priority' },
        { title: '问题来源', field: 'questionSource' },
        { title: '解决人', field: 'solver' },
        { title: '提交时间', field: 'submitTime' }
    ]
    const map19 = [
        { title: '工时对应时间', field: 'dailyDate' },
        { title: '工单标题', field: 'content' },
        { title: '所属父工单标题', field: 'parentContent' },
        { title: '工时', field: 'workingHours' }
    ]
    const map20 = [
        { title: '项目名称', field: 'projectName' },
        { title: '产品经理', field: 'productLeaderName' },
        { title: 'PMO', field: 'projectManagementOffice' }
    ]
    const map21 = [
        { title: '项目名称', field: 'projectName' },
        { title: '项目阶段名称', field: 'milepostName' },
        { title: '任务名称', field: 'taskName' },
        { title: '任务负责人', field: 'taskOwner' },
        { title: '审核员', field: 'assessorName' }
    ]
    // 映射关系
    const fieldMap = {
        // 平台/市场项目-新建
        work_flow_code_project00000001: map1,
        work_flow_code_project_00000003: map1,
        work_flow_code_project_00000005: map1,
        work_flow_code_platform_project_risk_close_00000001: map1,
        work_flow_code_task_pt_00000001: map2,
        work_flow_code_task_pt_00000002: map2,
        work_flow_code_task_00000001: map2,
        work_flow_code_task_modify_00000001: map2,
        work_flow_code_delivery_project_create_00000001: map3,
        work_flow_code_delivery_project_delete_00000001: map3,
        work_flow_code_delivery_project_update_00000001: map3,
        work_flow_code_delivery_project_risk_close_00000001: map3,
        work_flow_code_requirement_change_00000001: map3,
        'work_flow_code_create-milestones_00000001': map4,
        work_flow_code_create_work_flow_code_milepost_00000003: map4,
        work_flow_code_editing_milestone_00000001: map4,
        work_flow_code_create_task_00000001: map5,
        work_flow_code_task_00000002: map5,
        work_flow_code_task_recovery_00000001: map5,
        work_flow_code_task_switch_00000001: map5,
        'work_flow_code_project-template-create_00000001': map6,
        work_flow_code_project_template_delete_00000001: map6,
        work_flow_code_project_template_update_00000001: map6,
        work_flow_code_project_template_open_close_00000001: map6,
        work_flow_code_editing_milestone_00000002: map11,
        project_template_list_delete_00000001: map7,
        project_template_list_go_offline_00000001: map7,
        project_template_list_go_online_00000001: map7,
        work_flow_code_task_sa_00000001: map12,
        work_flow_code_action_task_edit_00000001: map8,
        work_flow_code_action_task_complete_00000001: map8,
        work_flow_code_risk_00000001: map13,
        work_flow_code_project_00000007: map14,
        work_flow_code_delete_work_week_evolve_00000001: map9,
        work_flow_code_edit_work_week_evolve_00000001: map9,
        work_flow_code_add_work_week_evolve_00000001: map9,
        'work_flow_code_platform_create-monthly-goals_00000001': map10,
        'work_flow_code_platform_delete-monthly-goals_00000001': map10,
        'work_flow_code_platform_editing-monthly-goals_00000001': map10,
        'work_flow_code_delivery_create-monthly-goals_00000001': map10,
        'work_flow_code_delivery_delete-monthly-goals_00000001': map10,
        'work_flow_code_delivery_editing-monthly-goals_00000001': map10,
        work_flow_code_daily_00000001: map15,
        work_flow_code_daily_00000002: map16,
        work_flow_code_collaborate_task_create_00000001: map17,
        work_flow_code_collaborate_task_update_00000001: map17,
        work_flow_code_collaborate_task_delete_00000001: map17,
        work_flow_code_collaborate_task_complete_00000001: map17,
        work_flow_code_task_batch_delay_00000001: map17,
        // 其他映射关系
        // 工单映射
        work_flow_code_work_order_resolved_00000001: map18,
        work_flow_code_work_order_no_need_handle_00000001: map18,
        work_flow_code_work_order_apply_circulation_00000001: map18,
        work_flow_code_work_order_daily_00000001: map19,
        work_flow_code_platform_template_create_00000001: map20,
        work_flow_code_platform_template_update_00000001: map20,
        work_flow_code_platform_template_delete_00000001: map20,
        work_flow_code_platform_template_task_complete_00000001: map21,
        work_flow_code_platform_template_task_delete_00000001: map21
    }
    // 为了计算反查类名
    const fieldMapReverse = {
        map1,
        map2,
        map3,
        map4,
        map5,
        map6,
        map7,
        map8,
        map9,
        map10,
        map11,
        map12,
        map13,
        map14,
        map15,
        map16,
        map17,
        map18,
        map19,
        map20,
        map21
    }
    const classMap = {
        map7: 'omit1',
        map9: 'omit2',
        map11: 'omit3',
        map16: 'omit3',
        map4: 'omit4',
        map17: 'omit4',
        map6: 'omit4',
        map8: 'omit4',
        map10: 'omit4',
        map12: 'omit4',
        map19: 'omit4',
        map13: 'omit4',
        map1: 'omit5',
        map3: 'omit5',
        map5: 'omit5',
        map14: 'omit5',
        map2: 'omit6',
        map18: 'omit6',
        map15: 'omit7'
    }
    // 获取数据
    // 获取数据
    const getApproveData = debounce(() => {
        approveState.approveData = []
        approveState.approveRemark = ''
        mainLoading.value = true

        post(`/solution-ppm/api/v2/built-in-system-ppm/approve/approve_list/${mappedActiveKey.value}`, {
            filter: {
                processDefinitionRecordId: selectedTag.value?.processDefinitionRecordId
            },
            sort: {},
            pageNo: pagination.value.current,
            pageSize: pagination.value.pageSize
        })
            .then(data => {
                if (data.code === 200) {
                    approveState.approveData = data.data.content.map(item => {
                        const fields = fieldMap[item.thirdProcessCode] || defaultMap
                        const fieldClassKey =
                            Object.keys(fieldMapReverse).find(key => fieldMapReverse[key] === fields) || ''
                        const fieldClass = classMap[fieldClassKey] || ''
                        return {
                            ...item,
                            fields: fields.map(field => ({
                                title: field.title,
                                value: item.approveFiledShow[field.field],
                                class: fieldClass,
                                id: field.title === '任务名称' ? 'task-long' : ''
                            })),
                            selected: false
                        }
                    })
                    pagination.value.total = data.data.totalElements
                } else {
                    message.error(data.message)
                }
            })
            .finally(() => {
                mainLoading.value = false
            })
    }, 500) // 300ms 的防抖时间
    function debounce(func, delay) {
        let timer
        return function (...args) {
            clearTimeout(timer)
            timer = setTimeout(() => func.apply(this, args), delay)
        }
    }

    const activeChange = debounce(() => {
        console.log('activeChange triggered')
        pagination.value.current = 1
        pagination.value.pageSize = 20
        checkName.value = ''
        getTagData()
    }, 300)
    function innerTabChange() {
        pagination.value.current = 1
        getApproveData()
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }

    /*
    样式
    */
    .page_root {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .item-container {
        position: relative;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        padding: 10px;
    }

    .item-content {
        display: flex;
        justify-content: space-between;
        border-left: 1px solid #d9d9d9;
        padding: 0 16px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .body {
        background-color: #fff;
        overflow: hidden;
        padding-bottom: 0;
        position: relative;
    }
    :deep(.ant3-tag-checkable) {
        background-color: #f0f2f5;
        height: 40px;
        padding: 10px 16px;
        flex-shrink: 0;
    }
    .sticky {
        position: sticky;
        left: 0;
        z-index: 1; /* 确保固定标签在其他标签之上 */
    }
    :deep(.ant3-tag-checkable-checked) {
        background-color: #d9e4fd;
        color: #3875ff;
        border-color: #3875ff;
        font-weight: 600;
    }
    .determine-div {
        margin-top: 20px;
    }
    .name-title {
        height: 20px;
        font-size: 16px;
        color: #3875ff;
    }
    .item {
        display: flex;
        background: #ffffff;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        margin-bottom: 16px;
        height: 112px;

        flex-direction: column;
    }

    .detail-batch {
        display: flex;
        justify-content: space-between;
    }
    .table-action {
        flex: 1;
    }
    .item-title,
    .item-main {
        text-align: left;
    }
    .item-main {
        max-width: 150px;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
        letter-spacing: 0;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        flex-shrink: 0;
    }
    .omit1 {
        max-width: 1200px;
    }
    .omit2 {
        max-width: 650px;
    }
    .omit3 {
        max-width: 420px;
    }
    .omit4 {
        max-width: 320px;
    }
    .omit5 {
        max-width: 260px;
    }
    .omit6 {
        max-width: 210px;
    }
    .omit7 {
        max-width: 150px;
    }
    .item-title {
        max-width: 150px;
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        font-weight: 400;
    }
    .type-title {
        font-size: 16px;
        color: #3875ff;
        letter-spacing: 0;
        font-weight: 600;
        margin-bottom: 12px;
        position: relative;
        cursor: pointer;
    }
    .sub-daily {
        width: 88px;
        height: 28px;
        background: #52c41a;
        border: 1px solid #52c41a;
        border-radius: 2px;
        position: absolute;
        color: #fff;
        right: 0;
        top: 0;
        text-align: center;
        font-size: 14px;
        line-height: 28px;
    }
    .item-top {
        width: 100%;
        background-image: linear-gradient(270deg, rgba(56, 117, 255, 0) 0%, rgba(56, 117, 255, 0.2) 100%);
        border-radius: 4px 0 0 0;
        height: 40px;
        border-left: 4px solid #3875ff;
        padding: 10px 20px;
        margin-bottom: 10px;
        display: flex;
    }
    .item-inner {
        padding: 5px 16px;
        display: flex;
    }
    .detail-btn,
    .pass-btn,
    .reject-btn,
    .urg-btn,
    reject-btn {
        width: 64px;
        height: 28px;
        line-height: 28px;
        border-radius: 2px;
        text-align: center;
        cursor: pointer;
    }
    .detail-btn,
    .urg-btn {
        background: rgba(56, 117, 255, 0.1);
        border: 1px solid #3875ff;
        border-radius: 2px;
        color: #3875ff;
    }
    .pass-btn {
        background: rgba(82, 196, 26, 0.2);
        border: 1px solid #52c41a;
        border-radius: 2px;
        color: #52c41a;
    }
    .reject-btn {
        background: rgba(245, 34, 45, 0.1);
        border: 1px solid #f5222d;
        border-radius: 2px;
        color: #f5222d;
    }
    .sub-time {
        margin-right: 40px;
    }
    .sub-people {
        margin-right: 16px;
    }
    .urging {
        width: 48px;
        height: 22px;
        line-height: 22px;
        background: #fa5f00;
        border-radius: 2px;
        color: #fff;
        text-align: center;
        margin-left: 40px;
    }
    .top-tag {
        display: flex;
        flex-wrap: nowrap;
    }
    .top-tag-container {
        padding: 0 24px;
        overflow-x: auto;
        white-space: nowrap;
        display: flex;
        align-items: center;
        padding-bottom: 5px; /* 添加一些内边距以避免内容紧贴滚动条 */
        margin-bottom: 5px;
    }
    .top-tag-container::-webkit-scrollbar {
        height: 4px; /* 设置滚动条的高度 */
    }
    #myIframe {
        position: relative;
        margin-top: 20px;
    }
    .detail-content {
        display: flex;
        height: 100%;
    }
    .detail-left {
        flex: 1;
        margin-right: 16px;
    }
    .detail-right {
        width: 250px;
        padding: 16px 0;
        padding-left: 16px;
        border-left: 1px solid #d9d9d9;
    }
    .flow-path {
        color: #262626;
        font-weight: 600;
        height: 16px;
        line-height: 16px;
        border-left: 4px solid #3875ff;
        padding-left: 10px;
        margin-bottom: 10px;
    }
    .pagination-div {
        position: absolute;
        right: 30px;
        bottom: 0;
        padding: 10px;
        background: transparent; /* 可选：为背景添加颜色 */
    }
    .main {
        overflow: auto;
        height: calc(100vh - 270px);
        padding: 0 24px;
    }
    .default-font,
    .weight-font {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        font-weight: 400;
    }
    .weight-font {
        color: #262626;
        margin-right: 16px;
    }
    .in-progress,
    .approved,
    .reject,
    .revoke {
        width: 48px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        border-radius: 2px;
        background: #bed2ff;
        color: #3875ff;
    }
    .approved {
        background: #ddf4d2;
        color: #52c41a;
    }
    .reject {
        background: #ffd4cc;
        color: #ff2a00;
    }
    .revoke {
        background: #d4d4d4;
        color: #595959;
    }

    .title-new-status {
        display: flex;
        height: 36px;
        line-height: 36px;
        padding: 0 16px;
        margin-bottom: 16px;
        margin-top: 16px;
        background-image: url('http://10.40.0.33:9001/file-storage/454387340800860160.png');
        background-size: cover;
        border: 1px solid #3875ff;
        border-radius: 5px;
        justify-content: space-between;
    }

    :deep(.ant3-steps-item-container) {
        padding: 0 0 0 16px;
    }
    :deep(.ant3-steps-item-tail::after) {
        margin-left: 12px;
        background-color: #3875ff;
    }
    :deep(.ant3-steps-item-description) {
        font-size: 12px;
        color: #595959;
        text-align: left;
        line-height: 20px;
        font-weight: 400;
    }
    :deep(.ant3-steps-item-icon) {
        width: 24px;
        height: 24px;
        line-height: 24px;
        color: #3875ff;
        margin-top: 6px;
    }
    :deep(.ant3-steps-item-title) {
        height: 28px;
        font-size: 14px;
        color: #262626;
        text-align: left;
        line-height: 22px;
        font-weight: 400;
    }
    :deep(.ant3-steps-item-process > .ant3-steps-item-container > .ant3-steps-item-icon) {
        background-color: #3875ff;
    }
    :deep(.ant3-steps-vertical > .ant3-steps-item > .ant3-steps-item-container > .ant3-steps-item-tail::after) {
        background: #3875ff;
    }
    :deep(.status-step .ant3-steps-vertical > .ant3-steps-item .ant3-steps-item-icon) {
        border-color: #3875ff;
    }
    :deep(.ant3-steps-item-finish .ant3-steps-item-icon > .ant3-steps-icon) {
        color: #3875ff !important;
    }
    .task-status-new {
        cursor: pointer;
    }
    .left-title,
    .right-title {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
        letter-spacing: 0;
        text-align: right;
        font-weight: 400;
    }
    .weight-status {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }
    :deep(.ant3-tabs-nav-wrap) {
        padding: 0 24px;
    }
    .cover {
        position: absolute;
        width: 24px;
        background-color: #fff;
        height: 80px;
        left: 0;
    }
    .cover1 {
        background-color: #fff;
        width: 32px;
        height: 80px;
        position: absolute;
        right: 0;
    }
    .no-data-img {
        width: 264px;
        height: 192px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .no-data-msg {
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #595959;
    }
</style>
